<template>
  <div>
    <!-- 上半部分查询窗口 -->
    <el-tabs
      v-model="editTabIndex"
      type="card"
      closable
      @tab-remove="removeTab"
    >
      <div class="btn">
        <el-button type="primary" size="mini" icon="el-icon-search"
          >查询</el-button
        >
        <el-button type="warning" size="mini" icon="el-icon-edit"
          >格式化</el-button
        >
        <el-button
          type="success"
          size="mini"
          icon="el-icon-circle-plus-outline"
          @click="addTab(editTabIndex)"
          >添加</el-button
        >
      </div>
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <sql-editor
          type="text/x-mysql"
          v-show="editTabIndex == item.name"
        ></sql-editor>
      </el-tab-pane>
    </el-tabs>
    <!-- 下半部分数据窗口 -->
    <el-tabs
      v-model="dataTabIndex"
      type="border-card"
      closable
      @tab-remove="removedaTab"
    >
      <el-tab-pane
        v-for="item in datableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <div class="btb" v-show="dataTabIndex == item.name">
          <!-- 数据 -->
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import IndexHtml from "@/components/LandingPage.vue";
import sqlEditor from "@/components/editor/sql_editor.vue";

export default {
  components: {
    IndexHtml,
    sqlEditor,
  },
  data() {
    return {
      closable: true,
      // 查询窗口所需数据 start
      editTabIndex: "1",
      editableTabs: [
        {
          title: "查询窗口",
          name: "1",
        },
      ],
      tabIndex: 1,
      // end
      // 数据窗口所需数据 start
      dataTabIndex: "99",
      datableTabs: [
        {
          title: "数据窗口",
          name: "99",
        },
      ],
      databIndex: 99,
      // end
    };
  },
  methods: {
    // 数据查询窗口添加事件
    addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "新查询",
        name: newTabName,
      });
      this.editTabIndex = newTabName;
    },
    // 语句编辑窗口删除事件
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editTabIndex;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.editTabIndex = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
    // 数据列表窗口删除事件
    removedaTab(targetName) {
      let tabs = this.datableTabs;
      let activeName = this.daTabIndex;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.daTabIndex = activeName;
      this.datableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>
<style>
.el-tabs__item {
  font-size: 12px;
  line-height: 30px;
  height: 30px;
}

.btb {
  overflow: auto;
  width: 100%;
  height: 550px;
}
.el-tabs__header {
  margin: 0;
}
.btn {
  width: 100%;
  margin: 10px 10px 10px 40px;
}
</style>